<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <title>ZPPChat | Chat</title>
  
  <!-- WebRTC -->
  <meta http-equiv="X-UA-Compatible" content="chrome=1"/>
  <script                src="/js/webrtc-adapter.js"></script>
  
  <!-- Channel API -->
  <script                src="/_ah/channel/jsapi"></script>
  
  <!-- JQuery -->
  <script                src="/js/jquery-1.8.2.js"></script>
  <script                src="/js/jquery.form.js"></script>
  
  <!-- Scroller -->
  <link rel="stylesheet" href="/css/scroller.css">
  <script                src="/js/scroller.js"></script>
  
  <!-- User defined styles and scripts. -->
  <link rel="stylesheet" href="/css/global.css">
  <link rel="stylesheet" href="/css/chat.css">
  <script>
    // Value used in chat.js.
    var CONFIG = {{ config|safe }};
    var ROUTES = {{ routes|safe }};
  </script>
  <script                src="/js/opus.js"></script>
  <script                src="/js/chat.js"></script>
</head>

<body>
  <!-- User videos. -->
  <div id="videos" class="centered">
    <!-- Local user' video. -->
    <div class="video-container box">
        <video width="100%" id="local-video" autoplay="autoplay"></video>
    </div>
    
    <!-- Remote user's video. -->
    <div class="video-container box">
        <video width="100%" id="remote-video" autoplay="autoplay"></video>
    </div>
  </div>
  
  <!-- Chat controls. This <div> is solely to be able to
       positiate #user-actions relatively to #text-chat. -->
  <div id="chat-controls" class="centered">
    <!-- Text chat. -->
    <div id="text-chat" class="box">
      <!-- Chat messages. -->
      <div id="messages" class="scrollable">
        <ul class="scrollable-content"></ul>
      </div>
    
      <!-- Sending new message. -->
      <form id="new-message">
        <input type="text" id="new-message-content" class="field">
        <input type="submit" value="Send" class="button right">
      </form>
    </div>
    
    <!-- Actions user can take.. -->
    <div id="user-actions" class="box">
      <!-- Uploading a file. -->
      <div id="file-upload-form-parent">
        <!-- Upload file form that should be here is loaded in chat.js. -->
      </div>
      <button id="file-upload-button" class="button action-item left">Upload file</button>
    
      <!-- User messages history. -->
      <a id="history" href="{{ routes.history_url }}" target="_blank"
         class="button action-item left">
         History
      </a>
      
      <!-- Media mute. -->
      <button id="video-toggle" class="button action-item left">Video On</button>
      <button id="audio-toggle" class="button action-item left">Audio On</button>
      
      <!-- Quit from the room. -->
      <a id="quit" href="{{ routes.main_url }}" class="button action-item left">
         Quit
      </a>
    </div>
  </div>
  
  <!-- Status messages. -->
  <div id="status"></div>
</body>

</html>